<template>
  <div class="header-nav">
    <a
      class="header-nav-item"
      v-for="n in navs"
      :class="{ 'nav-active': navName() === n }"
      :data-nav="n"
      :key="n"
      @click.prevent="routerLink"
      @mouseover="mouseEnter"
      @mouseleave="mouseLeave"
    >{{ $t('nav.' + n) }}</a>
    <div class="nav-hand" :style="{ left: handLeft + 'px' }"></div>

    <contact-us :show="showContactUs" @close="showContactUs = false"></contact-us>
  </div>
</template>

<script>
export default {
  name: 'HeaderNav',
  data () {
    return {
      handLeft: 30,
      lastLeft: 30,
      navs: ['works', 'solution', 'news', 'contact_us', 'progress'],
      showContactUs: false
    }
  },
  mounted () {
    this.resetNavLeft() // 重置导航指示
  },
  updated () {
    this.resetNavLeft() // 重置导航指示
  },
  methods: {
    navName () {
      return this.showContactUs ? 'contact_us' : this.$route.name
    },
    routerLink (e) {
      let $target = e.target
      if ($target.className.indexOf('nav-active') === -1) {
        let nav = $target.getAttribute('data-nav')
        let left = parseInt($target.offsetLeft + $target.offsetWidth / 2 + 2)
        this.handLeft = left
        this.lastLeft = left
        this.nav = nav
        if (nav === 'contact_us') {
          this.showContactUs = true
        } else {
          this.$router.push(nav === 'home' ? '/' : '/' + nav)
        }
      }
    },
    resetNavLeft () {
      if (this.showContactUs === false && this.lastLeft === this.handLeft) {
        let nav = this.$route.name
        let $currTarget = document.querySelector('[data-nav="' + nav + '"]')
        if ($currTarget) {
          let left = parseInt($currTarget.offsetLeft + $currTarget.offsetWidth / 2 + 2)
          this.nav = nav
          this.handLeft = left
          this.lastLeft = left
        } else {
          this.handLeft = -10
          this.lastLeft = -10
        }
      }
    },
    mouseEnter (e) {
      let $target = e.target
      let left = parseInt($target.offsetLeft + $target.offsetWidth / 2 + 2)
      this.handLeft = left
    },
    mouseLeave () {
      if (this.lastLeft !== this.handLeft) {
        this.handLeft = this.lastLeft
        this.lastLeft = this.handLeft
      }
      if (this.showContactUs === false && this.handLeft !== this.lastLeft) {
        this.handLeft = this.lastLeft
      }
    }
  }
}
</script>

<style lang="less">
.header-nav {
  height: 100%;
  position: relative;
  overflow-x: hidden;
}
.header-nav-item {
  display: inline-block;
  height: 100%;
  line-height: 100%;
  text-decoration: none;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  padding: 0 10px;
  color: #b6b6b6;
  cursor: pointer;
  transition: color 1.5s ease;

  &::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }

  &:hover {
    color: rgb(275, 173, 60);
  }
}

.nav-active {
  color: #fbb03b;
}

.nav-hand {
  position: absolute;
  bottom: 0;
  left: 40px;
  width: 4px;
  height: 22px;
  background: url("../assets/header_nav_hand.png") no-repeat;
  background-size: 100% 100%;
  transition: left 0.2s ease;
}
</style>
